/*
 * @Author: FengKongLi 
 * @Date: 2021-08-21 16:23:05 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-08-26 00:38:55
 */
// 顾客管理页面
<template>
  <div>
    <!-- 添加按钮、模糊搜索、查询按钮 -->
    <div class="search">
      <div>
        <el-button @click="toAdd" class="btn" type="primary">添加</el-button>
      </div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-input
            clearable
            v-model="searchForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            clearable
            v-model="searchForm.status"
            placeholder="请选择状态"
          >
            <el-option label="正常" value="正常"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据展示 -->
    <div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="编号" width="80"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="realname" label="姓名"> </el-table-column>
        <el-table-column prop="telephone" label="手机号"> </el-table-column>
        <el-table-column prop="gender" label="性别" width="80" align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.gender === 'male'" class="el-icon-male"></i>
            <i
              v-else-if="scope.row.gender === 'female'"
              class="el-icon-female"
            ></i>
            <i v-else>暂无</i>
          </template></el-table-column
        >
        <el-table-column label="状态" width="80" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="toEdit(scope.row)" type="text">编辑</el-button>
            <el-button @click="toDelete(scope.row.id)" type="text"
              >删除</el-button
            >
            <el-button @click="toDetail(scope.row)" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-div">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20, 30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加、编辑弹出的对话框 -->
    <div>
      <el-dialog :title="title" :visible.sync="visible" @close="resetForm">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item
            prop="username"
            label="用户名"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item
            prop="realname"
            label="姓名"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.realname"></el-input>
          </el-form-item>
          <el-form-item
            prop="telephone"
            label="手机号"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.telephone"></el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            label="密码"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item
            label="性别"
            prop="gender"
            :label-width="formLabelWidth"
          >
            <el-radio-group v-model="form.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group></el-form-item
          >
          <el-form-item
            v-if="title === '编辑顾客信息'"
            label="状态"
            prop="status"
            :label-width="formLabelWidth"
          >
            <el-radio-group v-model="form.status">
              <el-radio label="禁用"></el-radio>
              <el-radio label="正常"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  pageQuery as pageQueryCustome,
  deleteById,
  saveOrUpdate,
  addUserWidthRole,
} from "@/api/user";
export default {
  data() {
    return {
      //模糊搜索表单的数据
      searchForm: {
        username: "",
        status: "",
      },
      //分页参数
      params: {
        page: 1,
        pageSize: 10,
        roleId: 6,
      },
      //   表格数据
      tableData: {},
      // 总条数
      total: 0,
      //   添加、编辑对话框数据表单
      form: {},
      //   对话框标题
      title: "",
      //   添加、编辑对话框显示与隐藏
      visible: false,
      // 表单标签宽度
      formLabelWidth: "80px",
      // 顾客id
      customeId: "",
      // 表单数据校验
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  watch: {
    params: {
      handler() {
        this.pageQueryCustomeData();
      },
      deep: true,
    },
  },
  created() {
    this.pageQueryCustomeData();
  },

  methods: {
    //   获取顾客信息
    async pageQueryCustomeData() {
      let res = await pageQueryCustome(this.params);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 条/页 发生变化时
    handleSizeChange(val) {
      this.params = {
        page: 1,
        pageSize: val,
        // 需加顾客角色id,否则是查询所有用户
        roleId: 6,
      };
    },
    // 页数发生变化时
    handleCurrentChange(val) {
      this.params.page = val;
    },
    // 点击查询
    async toSearch() {
      let temp = {
        ...this.params,
        ...this.searchForm,
      };
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await pageQueryCustome(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 点击添加按钮
    toAdd() {
      this.title = "添加顾客信息";
      this.form = {roleId: 6};
      this.visible = true;
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields();
    },
    // 编辑按钮点击事件
    toEdit(row) {
      this.title = "编辑顾客信息";
      this.form = { ...row };
      this.visible = true;
    },
    // 对话框确定按钮点击事件
    toSave() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 如果是点击添加，则从addUserWidthRole接口请求
          if (this.title == "添加顾客信息") {
            let res = await addUserWidthRole(this.form);          
            if (res.status == 200) {
              this.$notify({
                title: "添加成功",
                message: res.message,
                type: "success",
              });
            }
          }
          // 如果是点击编辑，则从saveOrUpdate接口请求
          else {
            let res = await saveOrUpdate(this.form);
            if (res.status == 200) {
              this.$notify({
                title: "编辑成功",
                message: res.message,
                type: "success",
              });
            }
          }
          this.pageQueryCustomeData();
          this.resetForm();
          this.visible = false;
        } else {
          return false;
        }
      });
    },
    // 删除按钮
    async toDelete(id) {
      this.customeId = id;
      this.$confirm("此操作将永久删除这条数据,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteById({ id: this.customeId });
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
          }
          this.pageQueryCustomeData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;

  /* height: 40px; */
  .btn {
    margin-right: 10px;
  }
}
</style>